<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
		<title>Buidlings</title>
	</head>
	<body>
		<div id="buildingManagement">
			<h1>Building Management</h1>
			<h2>Resources</h2>
			<div id="ResourcesManagement">
			</div>
			<h2>Buildings</h2>
		</div>
		<script type="text/javascript">
			$("#ResourcesManagement").append($("<table>").attr({ border: "1"}));
			$("#ResourcesManagement table").append($("<tr>")).append($("<tr>"));
			$("#ResourcesManagement table tr:eq(0)").append($("<th>").append($("<img>").attr({alt : "wood", src : "Resources/Images/wood.png"})));
			$("#ResourcesManagement table tr:eq(0)").append($("<th>").append($("<img>").attr({alt : "gold", src : "Resources/Images/gold.png"})));
			$("#ResourcesManagement table tr:eq(0)").append($("<th>").append($("<img>").attr({alt : "metal", src : "Resources/Images/metal.png"})));
			$("#ResourcesManagement table tr:eq(0)").append($("<th>").append($("<img>").attr({alt : "stone", src : "Resources/Images/stone.png"})));
			$("#ResourcesManagement table tr:eq(1)").append($("<th>").text(user.resources.wood));
			$("#ResourcesManagement table tr:eq(1)").append($("<th>").text(user.resources.gold));
			$("#ResourcesManagement table tr:eq(1)").append($("<th>").text(user.resources.metal));
			$("#ResourcesManagement table tr:eq(1)").append($("<th>").text(user.resources.stone));
			for (var i = 0; i < user.buildingList.length; i++)
			{
				$("#buildingManagement").append($("<div>").addClass("building"));
				$(".building:eq("+i+")").append($("<div>").addClass("title").text(user.buildingList[i].name));
				$(".building:eq("+i+")").append($("<div>").addClass("buildingImg").append($("<img>").attr({ alt: "unitImg", src: "Resources/Images/farm.png"})));
				$(".building:eq("+i+")").append($("<div>").addClass("stats").append($("<table>").attr({ border: "1"})));
				$(".building:eq("+i+") table:eq(0)").append($("<tr>"));
					$(".building:eq("+i+") table:eq(0) tr:eq(0)").append($("<th>").append($("<img>").attr({alt: "metalImg", src: "Resources/Images/metal.png"})));
					$(".building:eq("+i+") table:eq(0) tr:eq(0)").append($("<th>").text(user.buildingList[i].price.metal));
					$(".building:eq("+i+") table:eq(0) tr:eq(0)").append($("<th>").append($("<img>").attr({alt: "goldImg", src: "Resources/Images/gold.png"})));
					$(".building:eq("+i+") table:eq(0) tr:eq(0)").append($("<th>").text(user.buildingList[i].price.gold));
				$(".building:eq("+i+") table:eq(0)").append($("<tr>"));
					$(".building:eq("+i+") table:eq(0) tr:eq(1)").append($("<th>").append($("<img>").attr({alt: "stoneImg", src: "Resources/Images/stone.png"})));
					$(".building:eq("+i+") table:eq(0) tr:eq(1)").append($("<th>").text(user.buildingList[i].price.stone));
					$(".building:eq("+i+") table:eq(0) tr:eq(1)").append($("<th>").append($("<img>").attr({alt: "woodImg", src: "Resources/Images/wood.png"})));
					$(".building:eq("+i+") table:eq(0) tr:eq(1)").append($("<th>").text(user.buildingList[i].price.wood));
				$(".building:eq("+i+") table:eq(0)").append($("<tr>"));
					$(".building:eq("+i+") table:eq(0) tr:eq(2)").append($("<th>").append($("<img>").attr({alt: "timeImg", src: "Resources/Images/time.png"})));
					$(".building:eq("+i+") table:eq(0) tr:eq(2)").append($("<th>").text(user.buildingList[i].price.time));
				$(".building:eq("+i+")").append($("<div>").addClass("quantity").text(user.buildingList[i].quantity));
				$(".building:eq("+i+")").append($("<div>").addClass("button").append($("<a>").attr({href: "#"}).append($("<div>").text("Sell")))
				.click(function(){
				for (var j = 0; j < user.buildingList.length; j++)
				{
					if (user.buildingList[j].name == $(this).parent().children("div").html())
					{
						if (user.buildingList[j].quantity > 0)
						{
							$(this).prev().text(--user.buildingList[j].quantity);
							user.resources.wood += user.buildingList[j].price.wood;
							$("#ResourcesManagement table tr:eq(1) th:eq(0)").text(user.resources.wood);
							user.resources.gold += user.buildingList[j].price.gold;
							$("#ResourcesManagement table tr:eq(1) th:eq(1)").text(user.resources.gold);
							user.resources.metal += user.buildingList[j].price.metal;
							$("#ResourcesManagement table tr:eq(1) th:eq(2)").text(user.resources.metal);
							user.resources.stone += user.buildingList[j].price.stone;
							$("#ResourcesManagement table tr:eq(1) th:eq(3)").text(user.resources.stone);
						}
					}
				}
				}));
				$(".building:eq("+i+")").append($("<div>").addClass("button").append($("<a>").attr({href: "#"}).append($("<div>").text("Buy")))
				.click(function(){
				for (var j = 0; j < user.buildingList.length; j++)
				{
					if (user.buildingList[j].name == $(this).parent().children("div").html())
					{
						if (user.resources.wood >= user.buildingList[j].price.wood && user.resources.gold >= user.buildingList[j].price.gold && user.resources.metal >= user.buildingList[j].price.metal && user.resources.stone >= user.buildingList[j].price.stone)
						{
							$(this).prev().prev().text(++user.buildingList[j].quantity);
							user.resources.wood -= user.buildingList[j].price.wood;
							$("#ResourcesManagement table tr:eq(1) th:eq(0)").text(user.resources.wood);
							user.resources.gold -= user.buildingList[j].price.gold;
							$("#ResourcesManagement table tr:eq(1) th:eq(1)").text(user.resources.gold);
							user.resources.metal -= user.buildingList[j].price.metal;
							$("#ResourcesManagement table tr:eq(1) th:eq(2)").text(user.resources.metal);
							user.resources.stone -= user.buildingList[j].price.stone;
							$("#ResourcesManagement table tr:eq(1) th:eq(3)").text(user.resources.stone);
						}
					}
				}
				}));
			}
		</script>
	</body>
</html>